
<template>
    <div class="top-info">
        <div class="route-info text-ellipsis">
            {{routeTitle}}
        </div>
        <div class="user-info">
            <img
                v-if="avatars"
                :src="avatars+'?x-image-process=image/resize,w_30'"
                :alt="username"
                class="user-info__avatar text-center"
            />
            <div
                v-else
                class="user-info__avatar text-ellipsis text-center"
            >{{username}}</div>
            <div
                class="user-info__name text-ellipsis"
                :title="username"
            >
                {{username}}
            </div>
            <el-popover
                trigger="click"
                v-model="isShowSignOut" style="overflow: hidden;"
                placement="bottom"
                :visible-arrow="false"
            >
                <p
                    class="cursor-pointer text-center"
                    @click="signOut"
                >
                    退出
                </p>
                <div slot="reference">
                    <app-icon
                        iconName="vcloud-youjiantou2"
                        className="cursor-pointer"
                        style="margin-left: 10px;"
                    ></app-icon>
                </div>
            </el-popover>
        </div>

    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

const { mapState, mapMutations } = createNamespacedHelpers("user");
export default {
    name: "top-info",
    props: {},
    data: () => ({
        isShowSignOut: false
    }),
    computed: {
        ...mapState(["userInfo", "sessionId"]),
        routeTitle() {
            return this.$route.meta && this.$route.meta.title;
        },
        username() {
            return (
                this.userInfo.username ||
                this.userInfo.realname ||
                this.userInfo.petname
            );
        },
        avatars() {
            return this.userInfo.avatars;
        }
    },
    methods: {
        ...mapMutations(["SET_SESSIONID"]),
        signOut() {
            this.isShowSignOut = false;
            // 登录
            this.api
                .signOut({}, { method: "get" })
                .then(res => {
                    this.SET_SESSIONID("");
                    this.$router.push("/login");
                })
                .catch(err => {});
        }
    }
};
</script>
<style lang="scss" src="../../../assets/styles/main/topInfo.scss" scoped></style>
